#manager-preview {
    height: 100%;

    body {
        height: 100%;
        margin: 0;
    }

    .preview {
        display: flex;
        flex-direction: column;
        height: 100%;

        .preview-header {
            background: #222;
            text-align: center;
            z-index: 100;

            .preview-size {
                display: inline-block;
                background: #333;
                color: #fff;
                padding: .5rem 1rem;
                margin: .5rem;
                border-radius: .25rem;

                i {
                    display: block;
                    font-size: 1.2rem;
                    padding: .25rem 0;
                }

                span {
                    font-size: .7rem;
                    text-transform: uppercase;
                    font-weight: 300;
                    opacity: .6;
                }
            }
        }

        .preview-body {
            background: #999;
            flex-grow: 1;

            iframe {
                display: block;
                width: 100%;
                height: 100%;
                margin: 0 auto;
                border: 0;
                transition: width ease-in-out .2s;
                box-shadow: 0 0 2rem rgba(0,0,0,.2);
            }
        }
    }
}